<template>
  <div>
    <!-- 文件上传 -->
    <div>
      <el-upload
        class="upload-demo"
        ref="upload"
        :limit="limitNum"
        accept=".xlsx"
        action="#"
        :data="this.upformInline"
        multiple
        :before-upload="beforeUpload"
        :http-request="uploadFile"
        :on-success="handleImageSuccess"
        :on-preview="handlePreview"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :file-list="upformInline.fileList"
        :auto-upload="false"
      >
        <el-button
          size="small"
          style="height: 30px; margin-top: 5px"
          class="el-upload__tip"
          plain
          type="primary"
          >上传产品二维码</el-button
        >
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  props:{
     formInline:Object
  },
  data() {
    return {
      limitNum: 3,
      upformInline:this.formInline
    };
  },
  mounted(){
   
  },
  methods: {
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件状态改变
    handleChange(file, fileList) {
      if (file) {
        this.upformInline.fileList = fileList.slice(-3);
        setTimeout(() => {
          this.$message({
            message: "文件上传成功",
            type: "success",
          });
        }, 1000);
      }
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      // this.formInline.fileList.shift();
      this.upformInline.fileList.shift();
      // console.log('=---------',this.fileList)
    },

    handlePreview(file) {
      console.log(file);
    },

    handleImageSuccess(res, file, fileList) {
      console.log(file);
      console.log(res);
      console.log(fileList);
    },

    uploadFile(file) {
      this.formData.append("file", file.file);
    },

    // 文件超出个数限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
  },
};
</script>

<style  scoped>
</style>